<template>
  <PublicPage pageName="任务中心" :borderType="true" :showNav="true">
    <view class="missionCenter">
      <view class="tabs-wrap">
          <u-tabs
            active-color="#E44435"
            height="88"
            inactive-color="#969799" 
            font-size="28"
            name="label"
            bar-width="80"
            :bold="false"
            item-width="154"
            :list="filterTabs"
            :is-scroll="false"
            :current="currentIndex"
            @change="_changeCurrent"
        />
      </view>

      <view style="padding: 80rpx 0;" class="bgf">
        <view class="fw6 tc u-p-b-16">{{currentIndex === 1 ? '本期已累计提现额度' : '本期已累计奖金'}}</view>
        <view class="fz-32 fw6 tc themeFontColor">{{currentIndex === 1 ? prizeObj.receiveQuota : prizeObj.totalBonus}}</view>
      </view>

      <view v-if="currentIndex === 1">
        <view v-for="(item,index) in perList" :key="index" class="u-flex forBox">
           <view class="u-m-r-24">
             <view class="jinbi fz-12">{{playvolumeFn(item.receiveQuota)}}</view>
             <view class="fz-10 tc u-p-t-6">提现额度</view>
           </view>
           <view class="stepBox">
             <view>累计完成<text class="u-p-l-8 u-p-r-8 themeFontColor">{{item.achievement}}元</text>业绩</view>
             <view class="u-flex">
               <view class="stepHuise">
                 <view class="stepYellow" :style="item.isReceive === 1 ? 'width: 100%;' : _stepBoxFn(item.currentAchievement,item.achievement)">
                   <view class="currentPlice" v-if="item.isReceive !== 1">￥{{item.currentAchievement}}</view>
                 </view>
               </view>
               <view class="fz-10 u-p-l-8 viceColor" v-if="item.isReceive === 1">已完成</view>
               <view class="fz-10 u-p-l-8" v-else>￥{{item.achievement}}</view>
             </view>
           </view>
           <view class="btn1" v-if="item.isReceive === 1">已获得</view>
           <view class="btn2" v-else>进行中</view>
        </view>
      </view>

      <view v-else>
        <view class="justify-between items-center u-m-t-24 taskBox">
          <view class="u-flex">
            <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/taskImg1.png" mode="widthFIx" style="width:80rpx;height:80rpx;" />
            <view class="u-p-l-24">
              <view class="fz-16 fw6">推荐帮卖拿奖金</view>
              <view class="viceColor fz-12 u-p-t-8">帮你的供货推荐新帮卖</view>
            </view>
          </view>
          <view class="btn" @click="navigateTo({url: '/pagesA/supplyGroups/recommendEarningBonus'})">立即推荐</view>
        </view>

        <!-- 2.0 -->
        <view class="justify-between items-center taskBox">
          <view class="u-flex">
            <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/taskImg3.png" mode="widthFIx" style="width:80rpx;height:80rpx;" />
            <view class="u-p-l-24">
              <view class="fz-16 fw6">创作笔记赚奖金</view>
              <view class="viceColor fz-12 u-p-t-8">发布笔记带货赚创作复用奖金</view>
            </view>
          </view>
          <view class="btn" @click="navigateTo({url: '/pagesA/release/issueEdit?pageType=2'})">发布创作</view>
        </view> 
      </view>

    </view>
  </PublicPage>
</template>

<script>
import publicPage from "@/components/publicPage/index.vue";
import mini from "@/api/mini.js";
import Util from '@/api/util.js'

export default {
  components: {
    publicPage
  },
  data(){ 
    return {
      filterTabs: [{label: '获取奖金'},{label: '获取额度'}],
      currentIndex: 0,
      prizeObj: {},
      perList: []
    }
  },
  onLoad(){
    this.getPoolInfo()
    this.getAchievementList()
  },
  methods:{
    getPoolInfo(){
      mini.getPoolInfo().then(res=>{
        this.prizeObj = res.data
      })
    },
    getAchievementList(){
      mini.getAchievementList().then(res=>{
        this.perList = res.data
      })
    },
    
    _changeCurrent(e){
      this.currentIndex = e
      this.throttle(this.getPoolInfo,1000,"")
      if(e === 1){
        this.getAchievementList()
      }
    },
    playvolumeFn (mun) {
      return Util.playvolume(mun,'万',false,true)
    },
    // 计算进度条宽度
    _stepBoxFn(val1,val2){
      if(val1 === 0){
        return 'width: 2rpx;'
      }
      let num1 = val1/val2
      let num2 = 320 * num1
      if(num2 <= 10){ // 最小宽度
        return 'width: 10rpx;'
      }else{
        return `width: ${Math.ceil(num2)}rpx;`
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.missionCenter{
  height: 100%;
  .bgf{
    background-color: #FFF;
  }
  .forBox{
    background-color: #FFF;
    box-shadow: inset 0px 1px 0px #EBEDF0;
    padding: 20rpx 32rpx;
    .jinbi{
      width: 88rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      color: #FFF;
      background-image: url('https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/taskImg2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .stepBox{
      padding-right: 50rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 114rpx;
      .stepHuise{
        width: 320rpx;
        height: 10rpx;
        background-color: #F2F3F5;
        border-radius: 20rpx;
        position: relative;
        .stepYellow{
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          background-color: #FEDFA6;
          border-radius: 20rpx;
          .currentPlice{
            background: #FDEDC7;
            text-align: center;
            font-size: 20rpx;
            border-radius: 16px;
            padding: 4rpx 10rpx;
            position: absolute;
            right: 0;
            transform: translateX(50%);
            top: -50rpx;
            &::before{
              display: block;
              content: ' ';
              position: absolute;
              bottom: -8rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 0;
              height: 0;
              border-left: 4rpx solid transparent;
              border-right: 4rpx solid transparent;
              border-top: 8rpx solid #FEDFA6;
            }
          }
        }
      }
    }
    .btn1,.btn2{
      background: #FFE5DE;
      color: #E44435;
      width: 128rpx;
      height: 48rpx;
      line-height: 48rpx;
      font-size: 24rpx;
      text-align: center;
      border-radius: 32rpx;
    }
    .btn2{
      background: #F2F3F5;
      color: #323233;
    }
  }
  .taskBox{
    background-color: #FFF;
    padding: 26rpx 32rpx;
    .btn{
      height: 48rpx;
      line-height: 48rpx;
      width: 128rpx;
      text-align: center;
      background-color: #E44435;
      border-radius: 32rpx;
      color: #FFF;
      font-size: 24rpx;
    }
  }
}
</style>